<template>
    <div class="page-header">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <el-button plain size="small" type="primary" @click="handleAdd">新增</el-button>
            </div>
        </template>
        <el-table
            :data="menus"
            border
            size="small"
            style="width: 100%"
            default-expand-all
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="route" label="路由"></el-table-column>
            <el-table-column prop="sort" label="排序"></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-popconfirm
                        title="确认删除？"
                        @confirm="handleDel(scope.row.id, scope.row.$index)"
                    >
                        <template #reference>
                            <el-button type="text" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <role-form :menu="menu" v-model:dialogVisible="dialogVisible" @reload="loadMenus"></role-form>
</template>

<script setup>
import roleForm from './Form.vue'
import { ElMessage } from "element-plus";
import { toRefs, reactive } from "vue"
import { delMenu, getMenuTree } from "../../api/menu"

const state = reactive({
    dialogVisible: false,
    menus: [],
    menu: {
        id: null,
        name: null,
        route: null,
        sort: null,
        parent_id: null,
    },
})

const handleAdd = () => {
    state.menu = {}
    state.dialogVisible = true
}

const handleEdit = (menu) => {
    state.menu.id = menu.id
    state.menu.name = menu.name
    state.menu.route = menu.route
    state.menu.icon = menu.icon
    state.menu.sort = menu.sort
    state.menu.parent_id = menu.parent_id > 0 ? menu.parent_id : ''
    state.menu.type = (!menu.parent_id && !menu.route) ? '1' : '2';
    state.dialogVisible = true
}

const handleDel = (id, index) => {
    delMenu(id).then(result => {
        if (result.status === 'success') {
            state.menus.splice(index, 1)
        } else {
            ElMessage.error(result.message)
        }
    })
}

const loadMenus = () => {
    getMenuTree().then(result => {
        state.menus = result.menus
    })
}

loadMenus()

const { dialogVisible, menus, menu } = toRefs(state)

</script>

<style scoped>
.el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
}
.box-card {
    margin: 20px;
    max-height: calc(100% - 100px);
    width: calc(100% - 40px);
    box-sizing: border-box;
    overflow: auto;
}
</style>